<template>
	<view>
		<u-navbar
			:autoBack="true"
			:is-fixed='false'
		>
			<view slot='center' class='nav-center'>
				{{ title }}
			</view>
			<view slot='right' class='nav-right'>
				<u-icon name="search" size='22'></u-icon>
				<u-icon name="shopping-cart" size='22'></u-icon>
			</view>
		</u-navbar>
		<!--课程筛选-->
		<view class='filter'>
			<view v-for="item in filterList" :key='item.id'>
				<view 
					class='filter-item'
					:class='item.id == current?"active":""'
					@click='changeTabs(item.id)'
				>{{ item.name }}</view>
			</view>
		</view>
		<!--课程列表-->
		<view class='re-lo'>
			<view class='new-list'>
				<view 
					class='new-list-item'
					v-for='item in courseList'
					:key='item.id'
				>
					<view class='new-item-img'>
						<image :src="item.courseCover"></image>
					</view>
					<view class='new-item-main'>
						<view class='new-item-title'>{{ item.courseName }}</view>
						<view class='new-item-type'>{{ courseType(item.courseLevel) }}</view>
						<view class='new-item-total'>
							<view class='new-item-price' v-if='item.discountPrice==0'>
								<view>免费</view>
							</view>
							<view class='new-item-price' v-else>
								<view>限时优惠</view>
								<view class='new-item-discountPrice'>¥ {{ item.discountPrice }}</view>
							</view>
							<view class='new-item-number'>{{ courseNumber(item.clicks) }}人学习</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { searchCourse } from '@/api/course.js'
import { mixin } from '@/mixins/mixin.js'
export default{
	mixins:[ mixin ],
	data () {
		return {
			title:'',
			filterList:[
				{id:0,name:'综合'},
				{id:1,name:'最新课程'},
				{id:2,name:'浏览最多'}
			],
			current:0,
			courseList:[]
		}
	},
	onLoad( e ) {
		this.title = e.key;
		
		searchCourse({
			pageNum:1,
			pageSize:3,
		}).then(res=>{
			this.courseList = res.pageInfo.list;
		})
		
		
	},
	methods:{
		changeTabs( id ){
			this.current = id;
		}
	}
}
</script>

<style>
.nav-center{
	font-size:38rpx;
}
.nav-right{
	display: flex;
}
.filter{
	display: flex;
	justify-content: space-between;
	padding-top:108rpx;
}
.filter-item{
	padding:0 33rpx;
	font-size: 26rpx;
	font-weight: 400;
	color: #A0A4AD;
}
.filter-item.active{
	color: #0648FF;
	font-weight: 900;
}
.re-lo{
	padding:14rpx;
}
.new-title-more{
	font-size: 26rpx;
	font-weight: 400;
	color: #A0A4AD;
}
.new-list-item{
	position: relative;
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top:40rpx;
}
.new-list-item:after{
	content: '';
	position: absolute;
	bottom:-20rpx;
	margin-top:40rpx;
	width: 100%;
	border-bottom: 1px solid #000000;
	opacity: 0.15;
}
.new-item-img{
	width: 237rpx;
	height: 186rpx;
	border-radius: 12rpx;
	background-color: #ccc;
}
.new-item-img image{
	width: 100%;
	height: 100%;
	border-radius: 12rpx;
}
.new-item-main{
	flex:1;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	height: 186rpx;
	padding-left:23rpx;
}
.new-item-title{
	font-size: 29rpx;
	font-weight: 400;
	color: #191919;
}
.new-item-type{
	font-size: 24rpx;
	font-weight: 400;
	color: #C5C5C5;
}
.new-item-total{
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.new-item-price{
	display: flex;
	font-size: 21rpx;
	color: #FF4B5C;
	font-weight: 600;
}
.new-item-number{
	font-size: 21rpx;
	font-weight: 400;
	color: #A0A4AD;
}
.new-item-discountPrice{
	padding-left:21rpx;
}
</style>